<template>
    <!--顶部导航条-->
    <el-menu :default-active="activeIndex" class="el-menu-demo top_nav" mode="horizontal" @select="handleSelect">

        <el-menu-item index="1">
            <a href="/" v-on:click="toIndex">首页</a>
        </el-menu-item>

        <el-menu-item index="2" v-if="this.currentUser.role === ''" class="login_nav"><a href="/login">登录</a></el-menu-item>
        <!--用户头像-->
        <el-menu-item index="2" v-if="this.currentUser.role !== ''">
            <a :href="'/myIndex?uname=' + currentUser.uname">
                <!--用户头像-->
                <el-avatar :src="currentUser.headImg"></el-avatar>
            </a>
        </el-menu-item>
        <el-submenu index="3" v-if="this.currentUser.role !== ''">
            <template slot="title">{{currentUser.nickName}}</template>
            <el-menu-item index="3-1" @click="publishPost">发帖</el-menu-item>
            <el-menu-item index="3-2" v-on:click="toMyIndex">我的主页</el-menu-item>
            <el-menu-item index="3-3">我的贴吧</el-menu-item>
            <el-menu-item index="3-4">我的收藏</el-menu-item>
            <el-menu-item index="3-5" v-on:click="signOut">退出</el-menu-item>
        </el-submenu>
        <el-submenu index="4" v-if="this.currentUser.role !== ''" :popper-append-to-body="false" :router="true">
            <template slot="title" >
                <!--方法返回值作为 绑定结果，this 加不加都一样 且不能加（）， 方法必须在 computed 中 而不是 method 中，不然会有警告 -->
                <el-badge is-dot id="top_nav_msg" :hidden="hideMsgDot"> <!--这里必须到 app.vue(配合id)修改样式，这个组件配合顶部导航栏不兼容，原生显示效果比较差-->
                消息
                </el-badge>
            </template>
<!--            <el-badge :value="0" :max="99">-->
                <el-menu-item index="4-1" @click="toMsgPage('/myMsg/comment')">
                    评论我的
                    <el-badge class="mark" :value="unreadNums.cmt" :hidden="unreadNums.cmt === 0" :max="99" />
                </el-menu-item>
<!--            </el-badge>-->
<!--            <el-badge :value="0" :max="99">-->
                <el-menu-item index="4-2" @click="toMsgPage('/myMsg/reply')">
                    回复我的
                    <el-badge class="mark" :value="unreadNums.rpl" :hidden="unreadNums.rpl === 0" :max="99" />
                </el-menu-item>
<!--            </el-badge>-->
<!--            <el-badge :value="0" :max="99">-->
                <el-menu-item index="4-3" @click="toMsgPage('/myMsg/subscribe')">
                    点赞
                    <el-badge class="mark" :value="unreadNums.sbc" :hidden="unreadNums.sbc === 0" :max="99" />
                </el-menu-item>
<!--            </el-badge>-->
<!--            <el-badge :value="0" :max="99">-->
                <el-menu-item index="4-4" @click="toMsgPage('/myMsg/collect')">
                    收藏
                    <el-badge class="mark" :value="unreadNums.clt" :hidden="unreadNums.clt === 0" :max="99" />
                </el-menu-item>
<!--            </el-badge>-->
        </el-submenu>
        <el-menu-item index="5" v-if="this.currentUser.role === 'admin'"><a href="/admin">后台管理</a></el-menu-item>
        <!--            <el-menu-item index="1">处理中心</el-menu-item>-->
    </el-menu>
</template>

<script>
    export default {
        name: "navigateBar",
        data(){
            return{
                activeIndex: '1',  /*顶部导航栏 激活菜单的 index*/
                currentUser: { /*当前用户*/
                    headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                    nickName: '',
                    motto: '',
                    role: '',
                },

                unreadNums: { // 四种消息类型的未读数量  初始化默认都为0
                    cmt: 0,
                    rpl: 0,
                    sbc: 0,
                    clt: 0
                },
            }
        },
        // props: ["currentUser"],
        created(){
            /*初始化用户信息*/
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userGet).then(req=>{
                /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
                if (req.data !== ""){  /*从登陆过来的   session中有当前登录用户的相关信息  对页面进行初始化*/
                    this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.headImg;
                    this.currentUser.nickName = req.data.nickName;
                    this.currentUser.motto = req.data.motto;
                    this.currentUser.role = req.data.role;
                    this.currentUser.uname = req.data.uname;
                }

                // 无论是否登录，给父组件的currentUser 赋初值，如果没登录就是上面的空值，如果登录了就是用户登录信息
                // 触发 父组件中的自定义事件，给 父组件中的 currentUser 进行赋值。
                this.$emit("updateUser", this.currentUser); // 传递的是 对象的引用的拷贝 ，指向的是同一个对象，在父组件修改此对象会同步修改到子组件
                console.log("更新完了父组件；");

                // 如果已登录才去获取 未读消息数
                // 获取当前登录用户各种消息未读数
                if (this.currentUser.role !== ''){
                    this.getUnreadNums();
                }
            });
        },
        computed:{
            /**
             * 是否隐藏 消息红点 显示
             * @returns {boolean}
             */
            hideMsgDot(){
                return this.unreadNums.rpl === 0 && this.unreadNums.cmt === 0 && this.unreadNums.sbc === 0 && this.unreadNums.clt === 0;
            },
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

            /*以新标签页的方式打开发帖界面*/
            publishPost(){
                let routeUrl = this.$router.resolve({
                    path: "/publishPost",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    // query: {role: this.currentUser.role},  //通过 query（params不行） 传参   在目标页面通过 this.$route.params.role 来接收参数
                });

                //以新标签页的方式打开
                window.open(routeUrl.href, "_blank");
            },

            // 跳转至我的主页
            toMyIndex(){
                let routeUrl = this.$router.resolve({
                    path: "/myIndex",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {uname: this.currentUser.uname},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            },

            toIndex(){
                // location.reload(); //刷新本页面
                //由于导航在多个页面被引用，所以这里首页  不能直接刷新页面了  而是跳转空白页再跳回来
                this.$router.push({name:'classifytmp', params:{fromIndex: 'fromIndex'}});
            },

            /*跳转到消息页面（本页面跳转）   参数为跳转的路径*/
            toMsgPage(path){
                this.$router.push(path);
            },

            /*退出登录*/
            signOut(){
                console.log("退出登录");

                // this.$http.get("http://localhost:8081/user/signOut").then(req=>{
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userSignOut).then(req=>{
                    if (req.data !== ""){
                        if (req.data.result_code === 200){ /*退出成功  */
                            this.$router.push({name:'classifytmp', params:{fromIndex: 'fromIndex'}});
                            this.$message({
                                duration: 3000, /*3秒后自动关闭*/
                                message: req.data.msg,
                                type: 'success'
                            });
                        }else {  /*退出出错*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'error'
                            });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },

getUnreadNums(){
    console.log("get Nums");
    this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.msgGetUnreadNums).then(req=>{
        if (req.data !== ""){
            if (req.data.rs.result_code === 200){ //后台成功获取信息
                // 设置未读数量 值
                this.unreadNums.cmt = req.data.cmtNum;
                this.unreadNums.rpl = req.data.rplNum;
                this.unreadNums.sbc = req.data.sbcNum;
                this.unreadNums.clt = req.data.cltNum;

                // 更新父组件中的变量值
                this.$emit("updateMsg", this.unreadNums); // 传递的是 对象的引用的拷贝 ，指向的是同一个对象，在父组件修改此对象会同步修改到子组件
            }else{ // 后台查询发生异常
                this.$notify.error({
                    title: '错误 - ' + req.data.rs.result_code,
                    message: req.data.rs.msg
                });
            }
        }else {
            this.$notify.error({
                title: '服务器错误',
                message: '糟糕，获取贴吧帖子列表出错了！'
            });
        }
    });
},
        },


    }
</script>

<style scoped>
    /*顶部导航栏调左边空位*/
    .top_nav{
        padding-left: 1050px;
    }
    /*顶部导航栏  的登录项（在未登录时显示）*/
    .login_nav{
        margin-left: 50px;
    }
</style>